<template>
    <div class="common-layout">
        <el-container class="index-con">
            <el-aside class="index-aside" style="width: 240px;">
                <el-menu default-active="/ex/miss-exam" class="side-menu" router
                    :background-color="isNightMode ? '#1a1a1a' : '#f5f7fa'"
                    :text-color="isNightMode ? '#e0e0e0' : '#2c3e50'" :active-text-color="'#409EFF'"
                    style="height: 100%;">
                    <div class="system-title">
                        <span class="title-text">NERV</span>
                        <div class="title-decoration"></div>
                    </div>
                    <el-menu-item class="create-exam-item">
                        <el-button type="primary" class="create-exam-btn" @click="goToCreateExam">
                            <el-icon>
                                <Plus />
                            </el-icon>
                            创建考试
                        </el-button>
                    </el-menu-item>
                    <el-menu-item index="/exam" class="menu-item">
                        <el-icon>
                            <Expand />
                        </el-icon>
                        <span>考试管理</span>
                    </el-menu-item>
                    <el-menu-item index="/ex/mark-exam" class="menu-item">
                        <el-icon>
                            <School />
                        </el-icon>
                        <span>人工评卷</span>
                    </el-menu-item>
                    <el-sub-menu class="menu-item" :index="'/analysis'" @click="handleAnalysisClick">
                        <template #title>
                            <el-icon>
                                <DataAnalysis />
                            </el-icon>
                            <span>分析</span>
                        </template>
                        <el-menu-item index="/ex/text-socre" class="submenu-item">
                            <el-icon>
                                <Histogram />
                            </el-icon>
                            <span>考试成绩</span>
                        </el-menu-item>
                       
                    </el-sub-menu>
                </el-menu>
            </el-aside>
            <el-container>
                <el-header class="main-header">
                    <Header default-active="/exam" />
                </el-header>
                <el-main>
                    <div class="miss-exam-content">
                        <div class="search-bar">
                            <div class="left-section">
                              
                                <div class="search-input">
                                    <el-date-picker v-model="startTime" type="date" placeholder="开始时间" class="time-input" :size="size" />
                                    <el-date-picker v-model="endTime" type="date" placeholder="结束时间" class="time-input" :size="size" />
                                    <el-input v-model="searchText" placeholder="请输入名称查询" class="search-text" :size="size">
                                        <template #prefix>
                                            <el-icon>
                                                <Search />
                                            </el-icon>
                                        </template>
                                    </el-input>
                                </div>
                            </div>
                            <!-- <div class="right-section">
                                <el-button class="export-btn" :size="size">
                                    <el-icon>
                                        <Download />
                                    </el-icon>
                                    导出数据
                                </el-button>
                            </div> -->
                        </div>

                        <div class="table-section">
                            <el-table :data="tableData" style="width: 100%" border :header-cell-style="{
                                background: '#f8faff',
                                color: '#2c3e50',
                                fontWeight: '600',
                                fontSize: '14px'
                            }" :cell-style="{
                                fontSize: '14px',
                                padding: '12px 0'
                            }">
                                <el-table-column prop="name" label="考试名称" min-width="180">
                                    <template #default="scope">
                                        <span class="exam-name">{{ scope.row.name }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="startEndTime" label="开始时间/结束时间" width="200" align="center" />
                                <el-table-column prop="totalParticipants" label="应参加人数" width="120" align="center" />
                                <el-table-column prop="actualParticipants" label="已参加人数" width="120" align="center" />
                                <el-table-column prop="participationRate" label="参与率" width="100" align="center">
                                    <template #default="scope">
                                        <span>{{ scope.row.participationRate }}%</span>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="absentCount" label="缺考人数" width="100" align="center" />
                                <el-table-column prop="absentRate" label="缺考率" width="100" align="center">
                                    <template #default="scope">
                                        <span>{{ scope.row.absentRate }}%</span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="操作" width="120" align="center" fixed="right">
                                    <!-- <template #default="scope">
                                        <el-button type="primary" link class="analysis-btn" @click="handleAnalysis(scope.row)">
                                            <el-icon>
                                                <DataAnalysis />
                                            </el-icon>
                                            查看详情
                                        </el-button>
                                    </template> -->
                                </el-table-column>
                            </el-table>

                            <div class="pagination">
                                <span class="page-text">共 {{ total }} 条记录</span>
                                <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
                                    :page-sizes="[10, 20, 30, 50]" layout="sizes, prev, pager, next" :total="total"
                                    @size-change="handleSizeChange" @current-change="handleCurrentChange" background />
                            </div>
                        </div>
                    </div>
                </el-main>
            </el-container>
        </el-container>
    </div>
    <!-- 缺考详情对话框 -->
    <el-dialog v-model="dialogVisible" :title="currentExam.name" width="99%" :before-close="handleClose"
        class="exam-detail-dialog">
        <div class="exam-tabs">
            <el-tabs v-model="activeTab" class="border-card-tabs">
                <el-tab-pane label="缺考详情" name="absent">
                    <div class="manual-grading">
                        <div class="filter-bar">
                            <div class="filter-items">
                                <el-select v-model="examStatus" placeholder="考试状态" class="filter-select">
                                    <el-option label="全部" value="" />
                                </el-select>
                                <el-select v-model="examGrade" placeholder="是否及格" class="filter-select">
                                    <el-option label="全部" value="" />
                                </el-select>
                                <div class="date-filters">
                                    <el-button :class="{ 'active': dateFilter === 'today' }"
                                        @click="dateFilter = 'today'">今天</el-button>
                                    <el-button :class="{ 'active': dateFilter === 'yesterday' }"
                                        @click="dateFilter = 'yesterday'">昨天</el-button>
                                    <el-button :class="{ 'active': dateFilter === 'last7days' }"
                                        @click="dateFilter = 'last7days'">近7天</el-button>
                                    <el-button :class="{ 'active': dateFilter === 'custom' }"
                                        @click="dateFilter = 'custom'">自定义</el-button>
                                </div>
                                <el-select v-model="departmentFilter" placeholder="所属部门" class="filter-select">
                                    <el-option label="全部" value="" />
                                </el-select>
                                <el-input v-model="searchText" placeholder="请输入大写字母查询" class="search-input">
                                    <template #prefix>
                                        <el-icon>
                                            <Search />
                                        </el-icon>
                                    </template>
                                </el-input>
                                <el-button type="primary" class="search-btn">
                                    <el-icon>
                                        <Search />
                                    </el-icon>
                                    查询
                                </el-button>
                                <el-button class="refresh-btn">
                                    <el-icon>
                                        <Refresh />
                                    </el-icon>
                                </el-button>
                            </div>
                        </div>

                        <el-table :data="manualGradingData" border style="width: 100%" :header-cell-style="{
                            background: '#f8faff',
                            color: '#2c3e50',
                            fontWeight: '600',
                            fontSize: '14px'
                        }" :cell-style="{
                                fontSize: '14px',
                                padding: '12px 0'
                            }">
                            <el-table-column prop="name" label="姓名" width="100" align="center" />
                            <el-table-column prop="department" label="所属部门" min-width="120" align="center" />
                            <el-table-column prop="examTime" label="开始时间/交卷时间" width="200" align="center" />
                            <el-table-column prop="duration" label="用时" width="100" align="center" />
                            <el-table-column prop="status" label="状态" width="100" align="center">
                                <template #default="scope">
                                    <span class="status-text">{{ scope.row.status }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column label="操作" width="100" align="center" fixed="right">
                                <template #default="scope">
                                    <el-button type="primary" link class="grade-link">
                                        去评卷
                                    </el-button>
                                </template>
                            </el-table-column>
                        </el-table>

                        <div class="pagination">
                            <span class="page-text">共 {{ manualTotal }} 条记录</span>
                            <el-pagination v-model:current-page="manualCurrentPage" v-model:page-size="manualPageSize"
                                :page-sizes="[10, 20, 30, 50]" layout="sizes, prev, pager, next" :total="manualTotal"
                                @size-change="handleManualSizeChange" @current-change="handleManualCurrentChange"
                                background />
                        </div>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </div>
    </el-dialog>
</template>

<script setup>
import { ref, computed } from 'vue';
import { Plus,  DataAnalysis, Histogram, School, Expand, CloseBold, FolderChecked, Refresh, User, Check, Star, Search, Download } from '@element-plus/icons-vue';
import Header from '@/components/Header.vue';
import { useRouter } from 'vue-router';
import { useTheme } from '@/stores/themeStore';
import { ElMessageBox } from 'element-plus';

const router = useRouter();
const themeStore = useTheme();
const isNightMode = computed(() => themeStore.isNightMode);
const goToCreateExam = () => {
    router.push({ name: 'CreateExam' });
};

const searchText = ref('');
const startTime = ref('');
const endTime = ref('');
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(3);
const size = ref('large');

const tableData = ref([
    {
        name: '高等数学2',
        startEndTime: '2025-03-17 20:18 - 2025-03-24 20:18',
        totalParticipants: 3,
        actualParticipants: 1,
        participationRate: 33,
        absentCount: 2,
        absentRate: 67
    },
    {
        name: '艺术与科学',
        startEndTime: '2025-03-17 11:18 - 2025-03-24 11:18',
        totalParticipants: 0,
        actualParticipants: 0,
        participationRate: 0,
        absentCount: 0,
        absentRate: 0
    },
    {
        name: 'gao',
        startEndTime: '2025-03-17 10:42 - 2025-03-24 10:42',
        totalParticipants: 0,
        actualParticipants: 0,
        participationRate: 0,
        absentCount: 0,
        absentRate: 0
    }
]);

const handleSizeChange = (val) => {
    console.log(`每页 ${val} 条`);
};

const handleCurrentChange = (val) => {
    console.log(`当前页: ${val}`);
};

const handleAnalysis = (row) => {
    console.log('查看详情', row);
    currentExam.value = row;
    dialogVisible.value = true;
};

const isAnalysisExpanded = ref(false);

const handleAnalysisClick = () => {
    isAnalysisExpanded.value = !isAnalysisExpanded.value;
};

// 对话框相关
const dialogVisible = ref(false);
const activeTab = ref('absent');
const currentExam = ref({});
const examStatus = ref('');
const examGrade = ref('');
const dateFilter = ref('today');
const departmentFilter = ref('');
const manualDateRange = ref([]);
const manualSearch = ref('');
const manualGradingData = ref([
    {
        name: '小帅',
        department: '信息学院',
        examTime: '2025-03-17 20:25 - 2025-03-17 20:27',
        duration: '2分钟',
        status: '缺考'
    }
]);
const manualTotal = ref(1);
const manualCurrentPage = ref(1);
const manualPageSize = ref(10);
const handleManualSizeChange = (val) => {
    console.log(`每页 ${val} 条`);
};

const handleManualCurrentChange = (val) => {
    console.log(`当前页: ${val}`);
};
const handleClose = (done) => {
    ElMessageBox.confirm('确认关闭？')
        .then(() => {
            done();
        })
        .catch(() => { });
};
</script>

<style scoped>
.index-con {
    width: 100vw;
    height: 100vh;
    background-color: var(--el-bg-color);
}

.index-aside {
    background-color: var(--el-menu-bg-color);
    border-right: 1px solid var(--el-border-color-lighter);
    transition: all 0.3s ease;
}

.system-title {
    padding: 20px;
    text-align: center;
    position: relative;
}

.title-text {
    font-size: 28px;
    font-weight: 600;
    background: linear-gradient(45deg, #409EFF, #36d1dc);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
    position: relative;
}

.title-decoration {
    width: 60%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #409EFF, transparent);
    margin: 10px auto 0;
}

.create-exam-item {
    padding: 20px !important;
    margin: 0 !important;
    height: auto !important;
}

.create-exam-btn {
    width: 100%;
    height: 44px;
    font-size: 16px;
    border-radius: 8px;
    background: linear-gradient(45deg, #409EFF, #36d1dc);
    border: none;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.create-exam-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(64, 158, 255, 0.2);
}

.menu-item {
    margin: 4px 0;
    border-radius: 4px;
}

.submenu-item {
    padding-left: 54px !important;
}

.main-header {
    background-color: var(--el-bg-color);
    border-bottom: 1px solid var(--el-border-color-lighter);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.index-main {
    padding: 20px;
    background-color: var(--el-bg-color-page);
}

.search-section {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}

.status-select,
.category-select {
    width: 160px;
}

.search-input {
    width: 300px;
}

.table-section {
    background: var(--el-bg-color);
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.miss-exam-content {
    padding: 20px;
    background-color: #f5f7fa;
    min-height: calc(100vh - 60px);
    transition: all 0.3s ease;
}

.search-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    background: white;
    padding: 24px;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

.left-section {
    display: flex;
    align-items: center;
    gap: 24px;
    flex: 1;
}

.search-input {
    display: flex;
    gap: 16px;
    flex: 1;
    min-width: 0;
}

.time-input {
    width: 160px !important;
}

.search-text {
    width: 200px !important;
}

.create-btn {
    flex-shrink: 0;
    background: linear-gradient(135deg, #409EFF, #36d1dc);
    border: none;
    padding: 12px 24px;
    font-size: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    border-radius: 8px;
}

.export-btn {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    padding: 12px 24px;
    border: 1px solid #dcdfe6;
    color: #606266;
    transition: all 0.3s ease;
    border-radius: 8px;
}

.table-section {
    background: white;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

.exam-name {
    color: #409EFF;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 4px 8px;
    border-radius: 4px;
}

.exam-name:hover {
    color: #66b1ff;
    background-color: #ecf5ff;
}

.analysis-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    transition: all 0.3s ease;
    padding: 6px 12px;
    border-radius: 6px;
}

.pagination {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 20px;
    padding-top: 20px;
    border-top: 1px solid #ebeef5;
}

.page-text {
    color: #606266;
    font-size: 14px;
}

:deep(.el-input__wrapper) {
    box-shadow: 0 0 0 1px #dcdfe6 inset !important;
    transition: all 0.3s ease;
    border-radius: 8px;
    padding: 0 8px;
}

:deep(.el-date-editor .el-input__wrapper) {
    padding-left: 30px;
}

:deep(.el-input__inner) {
    font-size: 14px;
    height: 32px;
    line-height: 32px;
}

:deep(.el-date-editor.el-input) {
    --el-date-editor-width: 160px;
}

.menu-item.el-sub-menu {
    transition: all 0.3s ease;
}

:deep(.el-sub-menu__title) {
    padding-left: 20px !important;
}

:deep(.el-menu-item.submenu-item) {
    padding-left: 54px !important;
    transition: all 0.3s ease;
}

:deep(.el-sub-menu__icon-arrow) {
    transition: transform 0.3s ease;
}

:deep(.el-sub-menu.is-opened > .el-sub-menu__title .el-sub-menu__icon-arrow) {
    transform: rotateZ(180deg);
}

:deep(.el-menu-item.is-active) {
    background-color: #ecf5ff !important;
}

:deep(.el-sub-menu__title:hover) {
    background-color: #f5f7fa !important;
}
.exam-detail-dialog {
    --el-dialog-padding-primary: 0;
    display: flex;
}

:deep(.el-dialog) {
    margin: 0 !important;
    display: flex;
    flex-direction: column;
    max-height: 100vh;
    width: 95% !important;
}

:deep(.el-dialog__body) {
    flex: 1;
    overflow: auto;
    padding: 0;
}

.exam-tabs {
    padding: 0;
}
.manual-grading {
    padding: 20px;
}

.manual-grading .table-actions {
    margin-bottom: 20px;
}

.manual-grading .left-section {
    display: flex;
    gap: 12px;
    align-items: center;
}

.manual-grading .status-select {
    width: 120px;
}

.manual-grading .date-range {
    width: 200px;
}

.manual-grading .department-select {
    width: 120px;
}

.manual-grading .search-input {
    width: 200px;
}

.manual-grading .search-btn {
    padding: 12px;
}

.manual-grading .refresh-btn {
    padding: 12px;
}
.filter-bar {
    background-color: #f5f7fa;
    padding: 16px;
    margin-bottom: 20px;
    border-radius: 4px;
}
.filter-items {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.date-filters {
    display: flex;
    gap: 8px;

    .el-button {
        padding: 8px 16px;
        border-radius: 4px;
        font-size: 14px;
        border: 1px solid #dcdfe6;
        background: white;
        color: #606266;

        &.active {
            background-color: #409EFF;
            color: white;
            border-color: #409EFF;
        }

        &:hover:not(.active) {
            color: #409EFF;
            border-color: #409EFF;
            background-color: #ecf5ff;
        }
    }
}

.filter-select {
    width: 120px;
}
.search-input {
    width: 200px;
}

.search-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 16px;
}

.refresh-btn {
    padding: 8px;
    border: 1px solid #dcdfe6;
    color: #606266;

    &:hover {
        color: #409EFF;
        border-color: #409EFF;
        background-color: #ecf5ff;
    }
}

.status-text {
    color: #f56c6c;
    background-color: #fef0f0;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
}

:deep(.el-tabs__nav-wrap) {
    padding: 0 20px;
}

:deep(.el-tabs__item) {
    font-size: 14px;
    height: 40px;
    line-height: 40px;
}

:deep(.el-tabs__item.is-active) {
    font-weight: 600;
}

.border-card-tabs {
    background: white;
    border-radius: 8px;
}
</style>